```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git冲突解决方案指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.8;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #9333ea 100%);
        }
        .code-block {
            background-color: #2d2d2d;
            border-radius: 8px;
            color: #f8f8f2;
        }
        .tag {
            display: inline-block;
            background-color: #e0e7ff;
            color: #4f46e5;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }
        .card-hover:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .solution-card:hover .solution-icon {
            transform: rotate(15deg) scale(1.1);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4">
        <div class="max-w-5xl mx-auto text-center">
            <div class="inline-block mb-6 px-4 py-2 bg-white bg-opacity-20 rounded-full">
                <span class="font-medium">版本控制专题</span>
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6">Git冲突解决方案全指南</h1>
            <p class="text-xl md:text-2xl opacity-90 mb-8 max-w-3xl mx-auto">掌握冲突解决技巧，提升团队协作效率</p>
            <div class="flex justify-center space-x-4">
                <a href="#what-is" class="px-6 py-3 bg-white text-indigo-600 font-semibold rounded-lg hover:bg-gray-100 transition duration-300">
                    <i class="fas fa-question-circle mr-2"></i>了解冲突
                </a>
                <a href="#solutions" class="px-6 py-3 bg-indigo-700 text-white font-semibold rounded-lg hover:bg-indigo-800 transition duration-300">
                    <i class="fas fa-tools mr-2"></i>解决方案
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-5xl mx-auto px-4 py-12">
        <!-- What is Git Conflict Section -->
        <section id="what-is" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-10 w-1 bg-indigo-600 rounded-full mr-4"></div>
                <h2 class="text-3xl font-bold">1. 什么是 Git 冲突？</h2>
            </div>
            <p class="text-lg text-gray-700 mb-6">Git 冲突发生在合并（Merge）或变基（Rebase）操作中，当两个分支对同一文件的同一部分进行了不同的修改时，Git 无法自动决定使用哪个版本，需要开发者手动解决冲突。</p>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600"><i class="fas fa-exclamation-triangle mr-2"></i>冲突的原因</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-code-branch"></i></span>
                            <span><strong>并行开发：</strong>多个开发者在同一时间修改了同一文件的相同部分</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-random"></i></span>
                            <span><strong>分支合并：</strong>将一个分支的更改合并到另一个分支时，两个分支对同一文件有不同的修改</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-history"></i></span>
                            <span><strong>变基操作：</strong>在变基过程中，当前分支的提交与目标分支的提交发生冲突</span>
                        </li>
                    </ul>
                </div>
                
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-600"><i class="fas fa-code mr-2"></i>冲突的表现</h3>
                    <p class="mb-4">当发生冲突时，Git 会在冲突文件中标记出冲突的部分：</p>
                    <div class="code-block p-4 mb-4">
                        <pre class="overflow-x-auto"><code class="text-sm"><<<<<<< HEAD
// 当前分支的修改
System.out.println("Hello from ts-main");
=======
// 目标分支的修改
System.out.println("Hello from ts-feature");
>>>>>>> ts-feature</code></pre>
                    </div>
                    <p class="text-sm text-gray-600">`<<<<<<< HEAD` 到 `=======` 之间是当前分支的修改，`=======` 到 `>>>>>>> ts-feature` 之间是目标分支的修改。</p>
                </div>
            </div>
            
            <!-- Conflict Visualization -->
            <div class="bg-white p-6 rounded-xl shadow-md mb-12">
                <h3 class="text-xl font-semibold mb-4 text-indigo-600"><i class="fas fa-project-diagram mr-2"></i>冲突可视化</h3>
                <div class="mermaid">
                    graph TD
                        A[主分支修改] --> C[冲突点]
                        B[特性分支修改] --> C
                        C --> D[手动解决冲突]
                        D --> E[最终合并结果]
                </div>
            </div>
        </section>

        <!-- Basic Steps Section -->
        <section id="basic-steps" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-10 w-1 bg-indigo-600 rounded-full mr-4"></div>
                <h2 class="text-3xl font-bold">2. 解决 Git 冲突的基本步骤</h2>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
                <!-- Step 1 -->
                <div class="solution-card bg-white p-6 rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <div class="solution-icon w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 transition duration-300">
                        <i class="fas fa-search text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2.1 检测冲突</h3>
                    <p class="text-gray-600 mb-4">在执行合并或变基操作时，Git 会提示冲突信息。</p>
                    <div class="code-block p-3 text-xs">
                        <code>Auto-merging src/main/java/com/ts/App.java <br>CONFLICT (content): Merge conflict in src/main/java/com/ts/App.java <br>Automatic merge failed; fix conflicts and then commit the result.</code>
                    </div>
                </div>
                
                <!-- Step 2 -->
                <div class="solution-card bg-white p-6 rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <div class="solution-icon w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 transition duration-300">
                        <i class="fas fa-list text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2.2 查看冲突文件</h3>
                    <p class="text-gray-600 mb-4">使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git status</code> 命令查看冲突文件</p>
                    <div class="code-block p-3 text-xs">
                        <code>Unmerged paths: <br>  (use "git add &lt;file&gt;..." to mark resolution) <br>  both modified:   src/main/java/com/ts/App.java</code>
                    </div>
                </div>
                
                <!-- Step 3 -->
                <div class="solution-card bg-white p-6 rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <div class="solution-icon w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 transition duration-300">
                        <i class="fas fa-hands-helping text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2.3 手动解决冲突</h3>
                    <p class="text-gray-600 mb-4">打开冲突文件，手动选择保留哪个版本的修改，或结合两个版本的修改。</p>
                    <div class="code-block p-3 text-xs">
                        <code>// 解决冲突后的代码 <br>System.out.println("Hello from ts-main and ts-feature");</code>
                    </div>
                </div>
                
                <!-- Step 4 -->
                <div class="solution-card bg-white p-6 rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <div class="solution-icon w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 transition duration-300">
                        <i class="fas fa-check-circle text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2.4 标记冲突已解决</h3>
                    <p class="text-gray-600 mb-4">使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git add</code> 命令标记冲突已解决</p>
                    <div class="code-block p-3 text-xs">
                        <code>git add src/main/java/com/ts/App.java</code>
                    </div>
                </div>
                
                <!-- Step 5 -->
                <div class="solution-card bg-white p-6 rounded-xl shadow-md transition duration-300 hover:shadow-lg">
                    <div class="solution-icon w-12 h-12 bg-indigo-100 text-indigo-600 rounded-full flex items-center justify-center mb-4 transition duration-300">
                        <i class="fas fa-flag-checkered text-xl"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2.5 完成合并或变基</h3>
                    <p class="text-gray-600">如果是合并操作，使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git commit</code> 完成合并；如果是变基操作，使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git rebase --continue</code></p>
                    <div class="code-block p-3 text-xs mt-2">
                        <code>git commit <br># 或 <br>git rebase --continue</code>
                    </div>
                </div>
            </div>
        </section>

        <!-- Complex Scenarios Section -->
        <section id="solutions" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-10 w-1 bg-indigo-600 rounded-full mr-4"></div>
                <h2 class="text-3xl font-bold">3. 复杂合并场景的解决方案</h2>
            </div>
            
            <div class="space-y-12">
                <!-- Scenario 1 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <span class="text-2xl text-indigo-600 mr-3"><i class="fas fa-file-alt"></i></span>
                                <h3 class="text-2xl font-semibold">3.1 多个文件的冲突</h3>
                            </div>
                            <p class="text-gray-600 mb-4">当多个文件发生冲突时，可以逐个文件解决冲突，或使用工具批量解决。</p>
                            
                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法1：逐个文件解决</h4>
                                    <ul class="space-y-2 text-gray-700">
                                        <li class="flex items-start">
                                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-check-circle text-sm"></i></span>
                                            <span>使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git status</code> 查看所有冲突文件</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-check-circle text-sm"></i></span>
                                            <span>逐个打开冲突文件，手动解决冲突</span>
                                        </li>
                                        <li class="flex items-start">
                                            <span class="text-indigo-500 mr-2 mt-1"><i class="fas fa-check-circle text-sm"></i></span>
                                            <span>使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git add</code> 标记每个文件的冲突已解决</span>
                                        </li>
                                    </ul>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法2：使用合并工具</h4>
                                    <p class="text-gray-700 mb-2">使用 Git 支持的合并工具（如 <code class="bg-gray-100 px-1 py-0.5 rounded">meld</code>、<code class="bg-gray-100 px-1 py-0.5 rounded">kdiff3</code>）批量解决冲突：</p>
                                    <div class="code-block p-3 text-sm">
                                        <code>git mergetool</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 flex items-center">
                            <div class="mermaid w-full">
                                graph LR
                                    A[多个冲突文件] --> B[逐个文件解决]
                                    A --> C[使用合并工具]
                                    B --> D[标记解决]
                                    C --> D
                                    D --> E[完成合并]
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Scenario 2 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <span class="text-2xl text-indigo-600 mr-3"><i class="fas fa-image"></i></span>
                                <h3 class="text-2xl font-semibold">3.2 二进制文件的冲突</h3>
                            </div>
                            <p class="text-gray-600 mb-4">二进制文件（如图片、PDF）无法像文本文件一样手动合并。</p>
                            
                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法1：选择其中一个版本</h4>
                                    <p class="text-gray-700 mb-2">使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git checkout --ours</code> 或 <code class="bg-gray-100 px-1 py-0.5 rounded">git checkout --theirs</code> 选择版本</p>
                                    <div class="code-block p-3 text-sm mb-2">
                                        <code># 选择当前分支的版本<br>git checkout --ours path/to/binary-file<br><br># 选择目标分支的版本<br>git checkout --theirs path/to/binary-file</code>
                                    </div>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法2：手动替换文件</h4>
                                    <p class="text-gray-700">将目标分支的二进制文件复制到当前分支，覆盖冲突文件。</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 flex items-center">
                            <div class="w-full text-center">
                                <img src="https://cdn-icons-png.flaticon.com/512/2889/2889676.png" alt="Binary files" class="w-48 mx-auto opacity-80">
                                <p class="text-gray-500 mt-4">二进制文件无法自动合并，需要手动处理</p>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Scenario 3 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <span class="text-2xl text-indigo-600 mr-3"><i class="fas fa-clock"></i></span>
                                <h3 class="text-2xl font-semibold">3.3 长期分支的冲突</h3>
                            </div>
                            <p class="text-gray-600 mb-4">在长期分支（如 <code class="bg-gray-100 px-1 py-0.5 rounded">main</code> 和 <code class="bg-gray-100 px-1 py-0.5 rounded">develop</code>）之间合并时，可能会发生大量冲突。</p>
                            
                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法1：频繁合并</h4>
                                    <p class="text-gray-700">定期将 <code class="bg-gray-100 px-1 py-0.5 rounded">develop</code> 分支合并到 <code class="bg-gray-100 px-1 py-0.5 rounded">main</code> 分支，或反之，减少冲突的积累。</p>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法2：使用变基</h4>
                                    <p class="text-gray-700 mb-2">在 <code class="bg-gray-100 px-1 py-0.5 rounded">develop</code> 分支上使用变基操作，将 <code class="bg-gray-100 px-1 py-0.5 rounded">main</code> 分支的最新更改应用到 <code class="bg-gray-100 px-1 py-0.5 rounded">develop</code> 分支：</p>
                                    <div class="code-block p-3 text-sm">
                                        <code>git checkout develop<br>git rebase main</code>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 flex items-center">
                            <div class="mermaid w-full">
                                gitGraph
                                    commit
                                    branch develop
                                    commit
                                    checkout main
                                    commit
                                    checkout develop
                                    commit
                                    checkout main
                                    merge develop
                                    commit
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Scenario 4 -->
                <div class="bg-white rounded-xl shadow-md overflow-hidden">
                    <div class="grid md:grid-cols-2 gap-0">
                        <div class="p-6">
                            <div class="flex items-center mb-4">
                                <span class="text-2xl text-indigo-600 mr-3"><i class="fas fa-users"></i></span>
                                <h3 class="text-2xl font-semibold">3.4 多人协作的冲突</h3>
                            </div>
                            <p class="text-gray-600 mb-4">在多人协作的项目中，冲突可能频繁发生。</p>
                            
                            <div class="space-y-4">
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法1：小步提交</h4>
                                    <p class="text-gray-700">将代码拆分为多个小提交，减少每次提交的影响范围。</p>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法2：及时拉取最新代码</h4>
                                    <p class="text-gray-700 mb-2">在开始新任务前，先拉取远程仓库的最新代码：</p>
                                    <div class="code-block p-3 text-sm mb-2">
                                        <code>git pull origin main</code>
                                    </div>
                                </div>
                                
                                <div>
                                    <h4 class="font-medium text-lg mb-2 text-indigo-700">方法3：使用功能开关</h4>
                                    <p class="text-gray-700">通过功能开关（Feature Toggle）将未完成的功能隐藏在代码中，避免冲突。</p>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 flex items-center">
                            <div class="w-full">
                                <div class="flex justify-center items-center space-x-6 mb-4">
                                    <div class="text-center">
                                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-user-edit text-2xl text-indigo-600"></i>
                                        </div>
                                        <p class="text-sm">开发者A</p>
                                    </div>
                                    <div class="text-center">
                                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-user-edit text-2xl text-indigo-600"></i>
                                        </div>
                                        <p class="text-sm">开发者B</p>
                                    </div>
                                    <div class="text-center">
                                        <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-2">
                                            <i class="fas fa-user-edit text-2xl text-indigo-600"></i>
                                        </div>
                                        <p class="text-sm">开发者C</p>
                                    </div>
                                </div>
                                <div class="text-center">
                                    <i class="fas fa-long-arrow-alt-down text-2xl text-gray-400 mb-2"></i>
                                    <p class="text-gray-600">协作开发容易产生冲突</p>
                                    <p class="text-gray-600">需要良好的沟通和规范</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Best Practices Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-10 w-1 bg-indigo-600 rounded-full mr-4"></div>
                <h2 class="text-3xl font-bold">4. 最佳实践</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <!-- Prevention -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="text-xl font-semibold">4.1 预防冲突</h3>
                    </div>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-green-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>代码规范：</strong>统一代码风格，减少不必要的冲突</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-green-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>模块化设计：</strong>将代码拆分为多个模块，减少文件冲突的可能性</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-green-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>代码审查：</strong>通过代码审查（Code Review）提前发现潜在的冲突</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Resolution -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-tools"></i>
                        </div>
                        <h3 class="text-xl font-semibold">4.2 解决冲突</h3>
                    </div>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>优先使用工具：</strong>使用 Git 支持的合并工具提高解决冲突的效率</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>保持冷静：</strong>遇到冲突时，仔细分析冲突的原因和解决方案</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-blue-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>测试验证：</strong>解决冲突后，运行单元测试和集成测试，确保代码的正确性</span>
                        </li>
                    </ul>
                </div>
                
                <!-- Teamwork -->
                <div class="bg-white p-6 rounded-xl shadow-md">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mr-3">
                            <i class="fas fa-users"></i>
                        </div>
                        <h3 class="text-xl font-semibold">4.3 团队协作</h3>
                    </div>
                    <ul class="space-y-3 text-gray-600">
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>明确分工：</strong>在团队中明确每个人的职责和任务，减少并行开发的冲突</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>定期同步：</strong>定期拉取远程仓库的最新代码，及时解决冲突</span>
                        </li>
                        <li class="flex items-start">
                            <span class="text-purple-500 mr-2 mt-1"><i class="fas fa-check-circle"></i></span>
                            <span><strong>沟通协作：</strong>遇到复杂冲突时，与相关开发者沟通，共同解决问题</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Practical Applications Section -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-10 w-1 bg-indigo-600 rounded-full mr-4"></div>
                <h2 class="text-3xl font-bold">5. 实际项目中的应用</h2>
            </div>
            
            <div class="grid md:grid-cols-3 gap-6">
                <!-- Project 1 -->
                <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="h-2 bg-indigo-600"></div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-globe text-xl text-indigo-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">5.1 在 ts-web 项目中</h3>
                        </div>
                        <p class="text-gray-600">团队使用 <code class="bg-gray-100 px-1 py-0.5 rounded">git mergetool</code> 工具批量解决多个文件的冲突，并通过代码审查确保冲突解决的正确性。</p>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="h-2 bg-green-600"></div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-server text-xl text-green-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">5.2 在 ts-api 项目中</h3>
                        </div>
                        <p class="text-gray-600">团队通过模块化设计和代码规范，减少了文件冲突的发生频率。</p>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="card-hover bg-white rounded-xl shadow-md overflow-hidden transition duration-300">
                    <div class="h-2 bg-purple-600"></div>
                    <div class="p-6">
                        <div class="flex items-center mb-4">
                            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mr-4">
                                <i class="fas fa-mobile-alt text-xl text-purple-600"></i>
                            </div>
                            <h3 class="text-xl font-semibold">5.3 在 ts-mobile 项目中</h3>
                        </div>
                        <p class="text-gray-600">团队定期将 <code class="bg-gray-100 px-1 py-0.5 rounded">main</code> 分支合并到 <code class="bg-gray-100 px-1 py-0.5 rounded">develop</code> 分支，减少了长期分支之间的冲突。</p>
                    </div>
                </div>
            </div>
        </section>

        <!-- Summary Section -->
        <section class="bg-indigo-50 rounded-xl p-8 mb-12">
            <div class="max-w-3xl mx-auto text-center">
                <h2 class="text-2xl md:text-3xl font-bold mb-6 text-indigo-700">掌握 Git 冲突解决方案</h2>
                <p class="text-lg text-gray-700 mb-8">通过理解冲突原因、掌握解决步骤、应用最佳实践，你可以在团队协作中高效处理 Git 冲突，提升开发效率和代码质量。</p>
                <div class="inline-flex items-center space-x-2 bg-white px-4 py-3 rounded-lg shadow-sm">
                    <i class="fas fa-lightbulb text-xl text-yellow-500"></i>
                    <span class="font-medium">记住：冲突是协作开发中的正常现象，关键是要学会如何高效解决！</span>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8 px-4">
        <div class="max-w-5xl mx-auto">
            <div class="text-center">
                <h3 class="text-xl font-semibold text-white mb-2">技术小馆</h3>
                <a href="http://www.yuque.com/jtostring" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
                    http://www.yuque.com/jtostring
                </a>
            </div>
            <div class="mt-6 pt-6 border-t border-gray-800 text-center text-sm text-gray-500">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            },
            gitGraph: {
                mainBranchName: 'main',
                rotateCommitLabel: false
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```